<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <xxx>
        <template slot="cars" slot-scope="scope">
            <span>车型：{{scope.item.name}}, 价格：{{scope.item.price}}</span>
        </template>
       </xxx>
    </div>
    <script src="./js/vue.js"></script>
    <script>
    Vue.component('xxx',{
        data:()=> {
            return {
                car:[]
            }
        },
        created(){
            this.car = [
            {
            name:'捷豹',
            price:240000
            },
            {
            name:'本田',
            price:150000
            },
            {
            name:'宝马5系',
            price:220000
            }
            ] 
        }
        ,
        template:`<div>
                    <ul>
                        <li :key="index" v-for="(item,index) in car ">
                            <slot name="cars" :item="item" />
                        </li>
                    </ul>
                </div>`
    })
    const ve = new Vue({
        el:'#app',
        data:{
        }
    })
</script>
</body>
</html>